<template>
    <div class="TimeLineBox">
      <h3>时间轴 {{ timeYMD }} {{ timeSFM }} </h3>
      <div class="TimeLineBox_content">
        <div class="block custom-block">
          <!-- <span class="demonstration">默认</span> -->
          <el-date-picker v-model="dayDate" type="date" placeholder="选择日期" size="small" @change="handleDatePickerChange"
            style="width: 150px;" :editable="false">
          </el-date-picker>
        </div>
        <TimeLine  :second="1000" :timeYMD="timeYMD" :timeSet="timeSet"
          @handleNowValueChange="handleNowValueChange">
        </TimeLine>
      </div>
      
    </div>
  </template>
  <script>
  //--start-#引入时间轴组件#-->
  import TimeLine from "./timeline.vue";
  //--start-#引入第三方关于时间的文件#-->
  import moment from 'moment';
  export default {
    components: {
      TimeLine
    },
    data() {
      return {
        //--start-#用于时间轴显示的初始化时间时分秒#-->
        timeSFM: "00:10:00",
        //--start-#时间集合#-->
        timeSet: [],
       
        //--start-#用于时间轴显示的初始化时间年月日#-->
        timeYMD: "",
        // //--start-#拼接时间组合 具体就是年月日时分秒#-->
        // timeCombination: null
        dayDate: '',
   
      }
    },
    mounted() {
      this.computerTimeSet();
    },
    computed: {},
    methods: {
      handleDatePickerChange() {
        //--start-#获取时间选择器的年月日#-->
        //console.log("@@", this.dayDate);
        if (this.dayDate) {
          //--start-#非空执行#-->
          this.handleTimeSetNode(moment(this.dayDate).format('YYYY-MM-DD'))
        }
      },
      //--start-#计算时间轴中需要的时间节点集合方法#-->
      computerTimeSet() {
        //--start-#获取当天的年月日0时0分0秒#-->
        let startOfDay = moment().startOf('day');
        //--start-#获取当天的前一天年月日0时0分0秒#-->
        let previousDate = startOfDay.subtract(1, 'days');
        this.handleTimeSetNode(previousDate)
      },
      handleTimeSetNode(timeNode) {
        //--start-#获取当天的前一天年月日用于计算时间节点#-->
        let oneTimeNode = new Date(timeNode);
        //--start-#获取当天的前一天年月日  用于时间轴标题显示#-->this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD HH:mm:ss');
        this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
        //--start-#遍历计算获取当天10分钟一次的时间节点组合#-->
        for (let i = 0; i < 144; i++) {
          //--start-#获取时间 并设置分钟位加10，意思是加10分钟#-->
          oneTimeNode.setMinutes(oneTimeNode.getMinutes() + 10);
          //this.timeSet.push(moment(oneTimeNode).format('YYYY-MM-DD HH:mm:ss'));
          //--start-#获取时间节点并加入到时间节点集合中#-->
          this.timeSet.push(moment(oneTimeNode).format('HH:mm:ss'));
        }
      },
      //--start-#父子函数回调，接收时间值的改变并响应#-->
      handleNowValueChange(val, val2) {
        if (val === "nextDay") {
          let oneTimeNode = new Date(this.timeYMD);
          oneTimeNode.setDate(oneTimeNode.getDate() + 1);
          this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
          this.timeSFM = val2;
        }
        else if (val === "preDay") {
          let oneTimeNode = new Date(this.timeYMD);
          oneTimeNode.setDate(oneTimeNode.getDate() - 1);
          this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
          this.timeSFM = val2;
        }
        else if (val === "nextDayAndZero") {
          let oneTimeNode = new Date(this.timeYMD);
          oneTimeNode.setDate(oneTimeNode.getDate() + 1);
          this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
          this.timeSFM = val2;
        }
        else if (val === "preDayAndZero") {
          let oneTimeNode = new Date(this.timeYMD);
          oneTimeNode.setDate(oneTimeNode.getDate() - 1);
          this.timeYMD = moment(oneTimeNode).format('YYYY-MM-DD');
          this.timeSFM = val2;
        }
        else {
          this.timeYMD = val;
          this.timeSFM = val2;
        }
        console.log(val, val2);
      }
    },
  // watch:{
  //   light(newVal,oldVal){
  //     console.log(newVal,oldVal);
  //   }
  // }
  }
  </script>
  <style lang="less" scoped>
  .TimeLineBox {
    width: 100%;
    height: 100%;
    //background-image: url("./../assets/images/播放.png");
    background-size: 100% 100%;
    background-color: aqua;
    position: relative;
   
    h3 {
      color: rgb(241, 19, 19);
      position: absolute;
      bottom: 150px;
      left: 50%;
      transform: translate(-50%, 0);
    }
   
    .TimeLineBox_content {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 1000px;
      // width: 80%;
      height: 90px;
   
      .custom-block {
        position: absolute;
        left: 20px;
        top: 5px;
        z-index: 10;
   
        //background-color: rgb(233, 11, 11);
   
        ::v-deep .el-input__inner {
          background-color: rgba(255, 255, 255, 0.0);
          border: none;
        }
      }
   
    }
  }
  </style>